<template>
  <div>
    <div class="xwgl_box">
      <div class="sele">
        <span style="margin-right:10px;">
          统计：
          <a-range-picker style="width:230px;" @change="dateChange" />
        </span>
        <a-input
          placeholder="请输入关键字"
          @change="xwglsearch"
          v-model="xwkeyword"
          style="width: 200px"
        />
        <a-icon type="search" class="search" />
      </div>

      <a-tabs :default-active-key="xwgl_key" @change="callback">
        <a-tab-pane v-for="(item,i) in tabdata" :key="i" :tab="item">
          <a-spin tip="正在加载中。。。。" size="large" :spinning="spinflag">
            <!-- spinflag -->
            <a-table
              :columns="columns"
              :pagination="pagination"
              @change="getNewsList"
              :data-source="data"
            >
              <a slot="name" slot-scope="text">{{ text }}</a>
              <template slot="operation" slot-scope="text, record, index">
                <div class="editable-row-operations">
                  <a href="javascript:;" @click="NewsModify(record)" class="del">修改</a>
                  <a-popconfirm title="确定删除吗?" class="del" @confirm="() => xwdelete(record.ID)">
                    <a href="javascript:;">删除</a>
                  </a-popconfirm>
                </div>
              </template>
              <!--  -->
              <template slot="Title" slot-scope="text, record, index">
                <div>
                  <!-- <a href=""></a> -->
                  <a href="javascript:;" @click="NewsModify(record)">{{text}}</a>
                </div>
              </template>
              <template slot="top_id" slot-scope="text, record, index">
                <div>
                  <a-input
                    placeholder
                    style="width: 100px"
                    @change="topchange(record)"
                    v-model="record.top_id"
                  />
                </div>
              </template>
              <template slot="vouch" slot-scope="text, record, index">
                <div>
                  <a-switch
                    :checked="text=='1'?true:false"
                    @change="swChange"
                    @click="swclick(record.ID)"
                  />
                </div>
              </template>
            </a-table>
          </a-spin>
        </a-tab-pane>
        <!-- <a-tab-pane key="2" tab="国内新闻" force-render>Content of Tab Pane 2</a-tab-pane> -->
        <!-- <a-tab-pane key="3" tab="展会信息">Content of Tab Pane 3</a-tab-pane> -->
        <!-- <a-tab-pane key="4" tab="轴承访谈">Content of Tab Pane 3</a-tab-pane> -->
        <!-- <a-tab-pane key="5" tab="网员动态">Content of Tab Pane 3</a-tab-pane> -->
        <!-- <a-tab-pane key="6" tab="轴承钢市场">Content of Tab Pane 3</a-tab-pane> -->
        <!-- <a-tab-pane key="7" tab="轴承钢价格">Content of Tab Pane 3</a-tab-pane> -->
      </a-tabs>
    </div>
  </div>
</template>

<script>
import headerComm from "../header-comm/header.vue";
import qs from "qs";
const columns = [
  {
    title: "标题",
    dataIndex: "Title",
    key: "Title",
    scopedSlots: { customRender: "Title" }
  },
  {
    title: "发布日期",
    dataIndex: "send_date",
    key: "send_date"
  },
  {
    title: "作者",
    dataIndex: "w_person",
    key: "w_person"
  },
  {
    title: "置顶号",
    dataIndex: "top_id",
    key: "top_id",
    scopedSlots: { customRender: "top_id" }
  },
  {
    title: "审核",
    dataIndex: "vouch",
    key: "vouch",
    scopedSlots: { customRender: "vouch" }
  },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" },
    key: "operation"
  }
];

const data = [];
export default {
  data() {
    return {
      tabdata: [
        "国际新闻",
        "国内新闻",
        "展会信息",
        "轴承访谈",
        "网员动态",
        "轴承钢市场",
        "轴承钢价格"
      ],
      data,
      columns,
      xwgl_key: 0,
      fbxwflag: false,
      pagination: {
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条数据`,
        total: 0,
        current: 1
      },
      newsType: 1,
      xwkeyword: "",
      examine: "",
      sw_id: "",
      top_id: "",
      modifyval: "",
      dateString: [],
      spinflag: true
    };
  },

  methods: {
    xwglsearch() {
      this.pagination.current = 1;
      this.getNewsList(this.pagination);
      this.$store.state.fh_index[0].xwkeyword = this.xwkeyword;
    },
    callback(key) {
      console.log(key);
      this.spinflag = true;

      this.newsType = Number(key) + 1;
      this.xwgl_key = Number(key);
      this.$store.state.fh_index[0].tabs_index = Number(key);
      this.$store.state.tabsname[0].newsType = this.newsType;
      this.$store.state.tabsname[0].tabdata = this.tabdata[key];
      // this.$store.state.fh_index[0].xwkeyword = this.xwkeyword;
      this.$store.state.fh_index[0].xwkeyword = "";
      this.xwkeyword = "";
      this.pagination.current = 1;

      this.getNewsList(this.pagination);
    },
    xwdelete(id) {
      // console.log("1111")
      this.axios
        .post(
          "xinwen/NewsDelete.php",
          qs.stringify({
            id: id,
            newsType: this.newsType
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
            this.getNewsList(this.pagination);
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    swChange(checked) {
      console.log(`a-switch to ${checked}`);
      if (checked) {
        this.examine = 1;
      } else {
        this.examine = 0;
      }
      setTimeout(() => {
        this.axios
          .post(
            "xinwen/NewsExamine.php",
            qs.stringify({
              id: this.sw_id,
              examine: this.examine,
              newsType: this.newsType
            })
          )
          .then(res => {
            console.log(res);
            if (res.data.code == 303) {
              this.$notification["success"]({
                message: "成功",
                description: res.data.msg
              });
              this.getNewsList(this.pagination);
            } else {
              this.$notification["error"]({
                message: "失败",
                description: res.data.msg
              });
            }
          });
      }, 500);
    },
    topchange(val) {
      console.log(val);
      console.log(this);
      this.axios
        .post(
          "xinwen/NewsModifyTopNum.php",
          qs.stringify({
            id: val.ID,
            topNum: val.top_id,
            newsType: this.newsType
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
            // this.getNewsList(this.pagination);
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    swclick(id) {
      this.sw_id = id;
    },
    getNewsList(pagination) {
      console.log(pagination);
      this.pagination.current = pagination.current;
      this.axios
        .post(
          "xinwen/NewsList.php",
          qs.stringify({
            page: this.pagination.current,
            pageSize: this.pagination.defaultPageSize,
            newsType: this.newsType,
            keyword: this.xwkeyword,
            keyword_time: this.dateString
          })
        )
        .then(res => {
          console.log(res);

          if (res.data.code == 303) {
            this.pagination.total = Number(res.data.result.total);
            for (var i = 0; i < res.data.result.data.length; i++) {
              res.data.result.data[i].key = i;
            }
            this.data = res.data.result.data;
            this.spinflag = false;
          } else {
            this.data = [];
            this.pagination.total = 0;
          }
        });
    },
    dateChange(date, dateString) {
      console.log(date, dateString);
      this.dateString = dateString;
      if (!dateString[0]) {
        this.dateString = [];
      }
      this.getNewsList(this.pagination);
    },
    NewsModify(val) {
      // console.log(val)

      this.$store.state.modifyval = val;
      this.$store.state.xiugaiflag = "edit";
      console.log(this.$parent.tab_xw);
      // this.$parent.tab_xw = 2;
      this.$router.push("/fbxw");

      this.$store.state.fh_index[0].tabs_index = this.xwgl_key;
      this.$store.state.fh_index[0].page_index = this.pagination.current;
      this.$store.state.fh_index[0].xwkeyword = this.xwkeyword;
      console.log(this.$store.state.modifyval);

      // this.$parent.xwback(2)
    }
  },
  components: {
    headerComm
  },
  created() {
    this.xwgl_key = this.$store.state.fh_index[0].tabs_index;
    this.newsType = this.$store.state.fh_index[0].tabs_index + 1;
    this.pagination.current = this.$store.state.fh_index[0].page_index;
    this.xwkeyword = this.$store.state.fh_index[0].xwkeyword;
    this.getNewsList(this.pagination);
  }
};
</script>

<style lang='less'>
.xwgl_box {
  position: relative;
  //   top: 112px;
  background: #fff;
  text-align: left;
  padding: 10px;
  .top_bav_bar {
    padding: 20px;
    text-align: left;
    button {
      margin: 0 10px;
    }
  }
  .ant-spin-text {
    font-size: 22px;
  }
}
.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-nav-container {
  height: 50px !important;
}
.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
  line-height: 48px !important;
}
// .fbxw_tk {
//   position: fixed;
//   top: 0;
//   left: 0;
//   background: rgba(0, 0, 0, 0.5);
//   width: 100%;
//   height: 1000px;
//   z-index: 999;
//   .fbxw_btn {
//     position: absolute;
//     top: 22%;
//     left: 37%;
//     width: 30%;
//     height: 248px;
//     background: #fff;
//     text-align: left;
//     padding: 35px;
//     button {
//       margin: 10px;
//     }
//   }
// }
</style>
